<template>
	<!-- 商铺金额提现 -->
	<view class="withdrawal_wp">
		<view class="bg"></view>
		<view class="info">
			<view class="top">
				<view class="money">
					<view>可提现金额</view>
					<view class="coin">{{info.credit}}</view>
				</view>
				<image :src="info.info.logo"></image>
			</view>
			<view class="num">
				<view class="number">{{info.info.supname}}</view>
				<view class="tip" @click="$navTo('/pages/groupmenu/withdrawalRecords?uid='+uid)">提现记录></view>
			</view>
		</view>
		<view class="record">
			<view class="withdrawal_number">
				<view class="head">提现金额</view>
				<view class="amount">
					<view class="a_item" :class="{'a_item_ac':money==300}" @click="selectMoney(300)"><text>￥</text>300</view>
					<view class="a_item" :class="{'a_item_ac':money==500}" @click="selectMoney(500)"><text>￥</text>500</view>
					<view class="a_item" :class="{'a_item_ac':money==1000}" @click="selectMoney(1000)"><text>￥</text>1000</view>
					<view class="a_item" :class="{'a_item_ac':money==2000}" @click="selectMoney(2000)"><text>￥</text>2000</view>
					<view class="a_item" :class="{'a_item_ac':money==5000}" @click="selectMoney(5000)"><text>￥</text>5000</view>
					<view class="a_item" :class="{'a_item_ac':money==10000}" @click="selectMoney(10000)"><text>￥</text>10000</view>
				</view>
				<view class="withdrawal_number_value"><text>￥</text> <input type="number" placeholder="输入自定义金额"
						v-model="money" @input="changeMoney" /></view>
				<view class="withdrawal_message">手续费：￥{{servicecharge}}&nbsp;&nbsp;({{info.settrade}}%)</view>
				<!-- <view class="withdrawal_message">账户余额：￥{{info.credit}} <text @click="qwithdrawal">全部提现</text></view> -->
			</view>
			<view class="withdrawal_status">
				<view class="head">提现方式</view>
				<radio-group class="withdrawal_status_item" @change="radioChange">
					<label class="withdrawal_status_label" v-for="(item, index) in items" :key="item.value">
						<view class="withdrawal_status_type">
							<text class="iconfont icon" :class="{'icon-weixin':item.value==2,'icon-zhifubao':item.value==1,'icon-yinhangka_mian':item.value==0}"></text>
							<text>{{item.name}}</text>
						</view>
						<view>
							<radio class="withdrawal_status_radio" color="#FF644A" :value="item.value" :checked="item.value == current" />
						</view>
					</label>
				</radio-group>
				<view class="ali_info" v-if="current==1">
					<view class="menu">提现账号</view>
					<view class="withdrawal_message border">支付宝姓名<input type="text" v-model="alipayname" placeholder="请填写支付宝姓名" /></view>
					<view class="withdrawal_message">支付宝账号<input type="text" v-model="alipay" placeholder="请填写支付宝账号" /></view>
				</view>
			</view>
		</view>
		<view class="reaname_sumbit" @click="onsumbit">确认提现</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				uid: 0,
				items: [{
					value: 1,
					name: '支付宝',
					checked: true,
				},{
					value: 2,
					name: '微信',
					checked: true,
				}],
				current: 1,
				info: {
					credit: '0.00',
					settrade: 0
				},

				money: '',
				servicecharge: 0,
				alipay: '',
				alipayname: '',
			}
		},
		onLoad(option){
			this.uid = option.uid;
			this.getShop();
		},
		methods: {
			selectMoney(number){
				this.money = number;
			},
			changeMoney() {
				this.servicecharge = this.money * this.info.settrade / 100;
			},
			qwithdrawal() {
				this.money = this.info.credit;
				this.servicecharge = this.info.credit * this.info.settrade / 100;
			},
			radioChange(e){
				this.current = e.detail.value;
			},
			onsumbit() {
				if (!this.uid) {
					this.$api.msg('请先选择提现店铺！')
					return;
				}
				if (!this.money) {
					this.$api.msg('申请金额为空！')
					return;
				}
				// if (this.money * 1 > this.info.credit * 1) {
				// 	this.$api.msg('余额不足！')
				// 	return;
				// }
				if(this.current==1){
					if (this.alipayname == '' || this.alipay == '') {
						this.$api.msg('请完善收款人信息！')
						return;
					}
				}
				let obj = {
					uid:this.uid,
					money: this.money,
					alipay: this.alipay,
					alipayname: this.alipayname,
					sendpay: this.current
				}
				this.$axios('groupPay/submit', 'POST', 'supplier', obj).then(res => {
					if (res.data.code == 200) {
						this.$api.msg('提交成功！');
						setTimeout(() => {
							this.$navBack();
						}, 1000)
					}
				})
			},
			getShop() {
				this.$axios('groupPay/pmain', 'POST', 'supplier',{
					uid:this.uid,
				}).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '/store/icon.css';

	page {
		background-color: #FBF8FE;
		color: $font-color-dark;
		padding-bottom: 130rpx;
	}
	.withdrawal_wp{
		background-color: #FBF8FE;
	}
	.bg{
		height: 500rpx;
		background: #F0E1FF;
	}
	.info{
		width: 94%;
		height: 306rpx;
		background: linear-gradient( 135deg, #B92DF1 0%, #8A17E2 100%);
		border-radius: 24rpx;
		padding: 40rpx;
		color:#fff;
		margin: auto;
		margin-top: -470rpx;
		.top{
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #FFFFFF30;
			justify-content: space-between;
			padding-bottom: 30rpx;
			image{
				width: 124rpx;
				height: 124rpx;
				border-radius: 12rpx;
				border: 4rpx solid #fff;
			}
			.money{
				font-size: 24rpx;
				color:#ffffffc7;
				.coin{
					font-size: 72rpx;
					font-weight: 600;
					color:#ffffff;
				}
			}
		}
		.num{
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.number{
				font-size: 28rpx;
				font-weight: 600;
			}
			.tip{
				font-size: 28rpx;
				color:#ffffffc7;
			}
		}
	}
	.record{
		background: #FBF8FE;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		font-size: 28rpx;
		color: #333333;
		margin-top: -30rpx;
		padding-bottom: 70rpx;
		padding: 36rpx 20rpx;
	}
	.w_shop {
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 30upx;
		margin-bottom: 20upx;
	}

	.w_s_selet {
		flex: 1;
		padding-left: 15upx;
	}
	.uni-input{
		color: $font-color-light;
	}
	.head{
		position: relative;
		font-size: 32rpx;
		color: #333333;
		font-weight: 600;
		padding-left: 28rpx;
		margin-bottom: 20rpx;
		&::before{
			content: '';
			position: absolute;
			left: 0;
			top: 6rpx;
			width: 8rpx;
			height: 32rpx;
			background: #8615E1;
			border-radius: 6rpx;
		}
	}
	.withdrawal_number {
		.amount{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.a_item{
				width: 216rpx;
				height: 120rpx;
				border-radius: 12rpx;
				margin-bottom: 20rpx;
				background: #F0E1FF;
				font-size: 48rpx;
				font-weight: 600;
				text-align: center;
				line-height: 120rpx;
				color: #8615E1;
				text{
					font-size: 32rpx;
					font-weight: 400;
				}
			}
			.a_item_ac{
				background: #8615E1;
				color: #ffffff;
			}
		}
		.withdrawal_message {
			color: $font-color-light;
			font-size: $font-sm;
			line-height: 60upx;
			padding: 20upx 0;
		}
	}

	.withdrawal_number_value {
		display: flex;
		align-items: center;
		padding: 30rpx 20rpx;
		background: #F3F3F3;
		border-radius: 12rpx;
		text {
			font-size: 48rpx;
			font-weight: bold;
			transform: scaleY(1.1);
			margin-right: 10upx;
			color: #8615E1;
		}
		input {
			font-size: $font-base;
		}
	}
	
	.ali_info{
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		.menu{
			font-weight: 600;
		}
		.withdrawal_message {
			color: #333;
			font-size: $font-sm;
			line-height: 60upx;
			padding: 8rpx 0;
			display: flex;
			align-items: center;
		}
		
		.withdrawal_message text {
			color: $base-color;
			margin-left: 30upx;
		}
		
		.withdrawal_message input {
			color: $font-color-dark;
			font-size: $font-sm;
			margin-left: 30rpx;
		}
		.border{
			border-bottom: 1rpx solid #DEDEDE;
		}
	}

	.withdrawal_status_label,
	.withdrawal_status_type {
		display: flex;
		align-items: center;
	}

	.withdrawal_status_label {
		flex: 1;
		width: 100%;
		background: #fff;
		margin-bottom: 20rpx;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		border-radius: 12rpx;
	}

	.withdrawal_status_radio {
		transform: scale(0.8);
	}

	.withdrawal_status_type .icon {
		font-size: 68rpx;
		margin-right: 20rpx;
	}

	.icon-weixin {
		color: #50bb34;
	}

	.icon-zhifubao {
		color: #44a9fd;
	}

	.icon-yinhangka_mian {
		color: #efa03f;
	}

	.reaname_sumbit {
		background: linear-gradient( 270deg, #8917E2 0%, #B92DF1 100%);
		border-radius: 38rpx;
		color: #fff;
		font-size: 28rpx;
		height: 74rpx;
		line-height: 74rpx;
		position: fixed;
		bottom: 60upx;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		width: 396rpx;
		z-index: 999;
	}
</style>
